<template>
  <view class="main-top">
    <view class="top-card">
      <view v-for="(i,k) of cards" :key="k" class="card" @click="listds(k)">
          <view class="name">{{i[0]}}</view>
          <view class="txt">
            <block v-if="k===0">
              <picker mode="date" v-if="date" :value="date" start="2000-01-01" :end="ends" @change="bindDateChange" fields="month">
                <text>{{i[1]}}</text>
                <text>{{i[2]}}</text>
              </picker>
            </block>
            <block v-else>
              <text>{{i[1]}}</text>
              <text>{{i[2]}}</text>
            </block>
          </view>
        </view>
    </view>
    <view class="show-money" v-if="hasLogin">
      <view class="title">今日支出</view>
      <view class="pay">￥{{expenses}}</view>
    </view>
    <money-key/>
    <movable-area class="movable-area" v-if="hasLogin">
      <movable-view class="movable-view" :x="300" :y="1500" direction="vertical">
        <view class="round" @click="jumpBatch">
          <image class="msg" src="/static/icons/VIP.png"/>
        </view>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import MoneyKey from '@/components/common/MoneyKey/MoneyKey'

export default {
  components: { MoneyKey },
  data() {
    return {
      year: '',
      month: '',
      date: ''
    }
  },
  onShow() {
    this.loadData()
    this.todayRecord()
  },
  computed: {
    ...mapState(['record', 'start', 'end', 'today', 'hasLogin']),
    ends() {
      const d = new Date()
      return `${d.getFullYear()}-${d.getMonth() > 8 ? (d.getMonth() + 1) : `0${d.getMonth() + 1}`}-01`
    },
    cards() {
      let month = this.month + 1
      month = month > 9 ? month : `0${month}`
      const record = this.record
      let a = '0'; let aa = '00'
      let b = '0'; let bb = '00'
      if (record) {
        const expense = record.expense
        const income = record.income
        a = expense.sum.amount || 0.00
        b = income.sum.amount || 0.00
        aa = this.$calc.filterInt(this.$calc.subtract(a, this.$calc.filterInt(a)) * 100)
        bb = this.$calc.filterInt(this.$calc.subtract(b, this.$calc.filterInt(b)) * 100)
        a = parseInt(a)
        b = parseInt(b)
      }
      return [[this.year + '年', month, '月▼'], ['收入', b, `.${bb}`], ['支出', a, `.${aa}`]]
    },
    expenses() {
      if (this.today && this.today.expense) {
        const expense = this.today.expense.sum.amount
        if (expense) {
          return this.$calc.getValue(expense)
        }
        return '0.00'
      }
      return ''
    }
  },
  methods: {
    ...mapMutations(['setDate', 'bookRecord', 'todayRecord']),
    listds(k) {
      if (k) {
        uni.$emit('setCategory', k === 1 ? '+' : '-')
        setTimeout(() => {
          uni.switchTab({ url: '/main/Detail/Detail' })
        }, 100)
      }
    },
    jumpBatch() {
      uni.navigateTo({ url: '/main/book/more' })
    },
    loadData(d = this.start) {
      this.year = d.getFullYear()
      this.month = d.getMonth()
      this.date = `${this.year}-${this.month > 8 ? (this.month + 1) : `0${this.month + 1}`}-01`
      const start = new Date(this.year, this.month, 1)
      const end = new Date(this.year, this.month + 1, 1)
      this.setDate({ start, end })
      this.bookRecord()
    },
    bindDateChange({ target: { value } }) {
      this.loadData(new Date(value))
    }
  }
}
</script>

<style lang="scss" scoped>
  .main-top{
    padding-top: 0;
  }
  .top-card{
    font-size: 20rpx;
    padding: 24rpx;
    color: #333;
    display: flex;
    background-color: $uni-color-primary;
    .card{
      margin-left: 60rpx;
      flex: 1;
      .name{
        opacity: 0.6;
      }
      .txt{
        margin-top: 16rpx;
        & text:first-child{
          font-size: 40rpx;
          font-weight: 500;
        }
        & text:last-child{
          font-size: 28rpx;
        }
      }
    }
    .card:first-child{
      margin-left: 0;
    }
  }
  .show-money {
    margin-top: 168px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 42rpx;
    font-weight: 500;
    justify-content: center;

    .title {
      color: #81B7AA;
    }

    .pay {
      color: #81B7AA;
    }

  }
  .movable-area{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 90%;
    z-index: 999;
    pointer-events: none;
  }
  .movable-view {
    .round{
      display: flex;
      align-items: center;
      .msg{
        width: 80rpx;
        height: 80rpx;
      }
      position: relative;
      width: 80rpx;
      height: 80rpx;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 40rpx -2rpx rgba(188,193,209,1);
      border-radius: 64rpx;
    }
    pointer-events: auto;
  }
</style>
